<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>5-1背景相关的属性</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        div{
            background-color: #dcc3b5;
            padding: 30px;
            border:15px dashed #425be3;
            margin: 6px 0 20px;
            color: #6e73b1;
            font-size: 2rem;
            font-weight: bold;
        }
        #background-clip div:nth-of-type(1){
            background-clip: border-box;
        }
        #background-clip div:nth-of-type(2){
            background-clip: padding-box;
        }
        #background-clip div:nth-of-type(3){
            background-clip: content-box;
        }
        #background-clip div:nth-of-type(4){
            background: url("redBgFlower.jpg");
            background-clip: padding-box;
            text-shadow: 2px 2px 5px black;
            color: #ff0;
        }
        #background-origin div{
            background: #dcc3b5 url("redBgFlower.jpg") no-repeat;
            text-shadow: 2px 2px 5px #ffffff;
        }
        #background-origin div:nth-of-type(1){
            background-origin: border-box;
        }
        #background-origin div:nth-of-type(2){
            background-origin: padding-box;
        }
        #background-origin div:nth-of-type(3){
            background-origin: content-box;
        }
        #background-origin div:nth-of-type(4){
            background-origin: border-box;
            background-clip: padding-box;
        }

        #background-size div{
            background: #dcc3b5 url("redBgFlower.jpg");
            text-shadow: 2px 2px 5px #ff0;
            color: #000;
        }
        #background-size div:nth-of-type(1){
            background-size: 50px 20px;
        }
        #background-size div:nth-of-type(2){
            background-size: 50px auto;
        }
        #background-size div:nth-of-type(3){
            background-size: 80px;
        }
        #background-size div:nth-of-type(4){
            background-size: 50% 50%;
        }
        #background-size div:nth-of-type(5){
            background-size: contain;
            background-repeat: no-repeat;
        }
        #background-size div:nth-of-type(6){
            background-size: cover;
            background-repeat: no-repeat;
        }

        #background-repeat div{
            border-width: 1px;
            background: #dcc3b5 url("blackCat.jpg");
            background-size: 50px;
            text-shadow: 2px 2px 5px #ff0;
            color: #ff2700;
            font-size: 1.2rem;
        }
        #background-repeat div span{
            background: yellow;
        }
        #background-repeat div:nth-of-type(1){
            background-repeat: space;
        }
        #background-repeat div:nth-of-type(2){
            background-repeat: round;
        }

        #mul-background div span{
            text-shadow: 2px 2px 2px black;
            color: #81ff00;
            background: rgba(255, 135, 128, 0.5);
        }
        #mul-background div{
            background-image: url("flower.jpg"), url("redBgFlower.jpg"), url("blackCat.jpg");
            background-repeat: no-repeat,repeat-x,no-repeat;
            background-position: 50% 50%, 0 0, 100% 0;
            background-origin:padding-box,padding-box, border-box;
        }
    </style>
</head>
<body>
<h1>5-1背景相关的属性</h1>
<h3>背景的范围background-clip</h3>
<section id="background-clip">
    <code>background-clip: border-box;</code>
    <div>background-clip: border-box;</div>
    <code>background-clip: padding-box;</code>
    <div>background-clip: padding-box;</div>
    <code>background-clip: content-box;</code>
    <div>background-clip: content-box;</div>
    <code>background-clip: padding-box;</code>
    <div>background-clip: padding-box;</div>
</section>

<h3>背景的绘制起点</h3>
<section id="background-origin">
    <code>background-origin: border-box;</code>
    <div>background-origin: border-box;</div>
    <code>background-origin: padding-box;</code>
    <div>background-origin: padding-box;</div>
    <code>background-origin: content-box;</code>
    <div>background-origin: content-box;</div>
    <code>background-origin: border-box;<br>background-clip: padding-box;</code>
    <div>背景不包括边框，但是从边框开始绘制</div>
</section>

<h3>背景图的大小</h3>
<section id="background-size">
    <code>background-size: 50px 20px;</code>
    <div>背景宽50px，高20px</div>
    <code>background-size: 50px auto;</code>
    <div>背景宽50px, 高auto</div>
    <code>background-size: 80px;</code>
    <div>只设置一个80px</div>
    <code>background-size: 50% 50%;</code>
    <div>背景宽50%，高50%</div>
    <code>background-size: contain;<br>background-repeat: no-repeat;</code>
    <div>background-size: contain;保持比例不变形</div>
    <code>background-size: cover;<br>background-repeat: no-repeat;</code>
    <div>background-size: cover;保持比例不变形</div>
</section>

<h3>背景图的平铺选项</h3>
<section id="background-repeat">
    <code>background-repeat: space;</code>
    <div><span>background-repeat: space;通过调整位置使最后一个图完整显示</span></div>
    <code>background-repeat: round;</code>
    <div><span>background-repeat: round;通过调整每个图片大小可使最后一个图完整显示</span></div>
</section>

<h3>多个背景图同时显示</h3>
<section id="mul-background">
    <code>        background-image: url("flower.jpg"), url("redBgFlower.jpg"), url("blackCat.jpg");
        background-repeat: no-repeat,repeat-x,no-repeat;
        background-position: 50% 50%, 0 0, 100% 0;
        background-origin:padding-box,padding-box, border-box;</code>
    <div><span>多个背景图同时显示</span></div>
</section>

</body>
</html>